<template>
    <div>
        <div class="seach">
           <div class="bs">
                <b>筛选查询</b>
                <b>收起筛选</b>
                <b @click="sub()">查询结果</b>
           </div>
           <div class="seacher">
            <span>
                <b>输入搜索:</b>
                <input type="text" placeholder="订单编号/商品货号" v-model="value" ref="inp">
            </span>
             <span>
                <b>收货人:</b>
                <input type="text" placeholder="收货人姓名/手机号码" v-model="name">
            </span>
             <span>
                <b>提交时间:</b>
                <el-date-picker
                v-model="value1"
                type="date"
                placeholder="选择日期">
                </el-date-picker>
            </span>
           </div>
        </div>
        <div>
              <el-table
    :data="tableData.filter(data => !value || data.id.toLowerCase().includes(value.toLowerCase()))"
    style="width: 100%">
    <el-table-column
      label="订单编号"
      prop="id">
    </el-table-column>
    <el-table-column
      label="提交时间"
      prop="time">
    </el-table-column>
      <el-table-column
      label="用户账号"
      prop="tel">
    </el-table-column>
      <el-table-column
      label="收货人"
      prop="name">
    </el-table-column>
      <el-table-column
      label="订单金额"
      prop="num">
    </el-table-column>
      <el-table-column
      label="订单状态"
      prop="fa">
    </el-table-column>
      <el-table-column
      label="自动确认收货时间"
      prop="day">
    </el-table-column>
      <el-table-column
      label="订单应收货时间"
      prop="time1">
    </el-table-column>
    <!-- <el-table-column
      align="right"> -->
      <!-- <template slot="header" >
        <el-input
          v-model="search"
          size="mini"
          placeholder="输入关键字搜索"/>
      </template> -->
       <el-table-column label="操作">
      <template slot-scope="scope" >
          <div class="button">
         <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">查看订单</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">确认收货</el-button>
          </div>
       
      </template>
    </el-table-column>
    <!-- </el-table-column> -->
  </el-table>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
// Vue.component(Button.name, Button);
import {getdata} from '../../../api'
@Component({
    data(){
        return {
        tableData: [],
        value: '',
        name:'',
        value1:''
        }
    },
   methods:{
 
   },
    created(){
        getdata().then(resp=>{
           this.tableData=resp.data.data
        })
     }
})
export default class Huo extends Vue {
     private value?:string=''
    
       
       
     
}
</script>

<style scoped>
  .seach{
      width: 80%;
      height: 120px;
      /* background: chocolate; */
      border: solid 1px #ccc;
      margin: 10px auto;
  }
  .bs{
      width: 100%;
      height: 60px;
      background: #f3f3f3;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #ccc;
  }
  .seacher{
      flex: 1;
      width: 100%;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: space-between;
  }
  span{
       display: flex;
      align-items: center;
  }
  .seacher input{
      outline: none;
      width: 70%;
      height: 30px;
  }
  .button{
      width: 40%;
      display: flex;
      align-items: center;
  }

</style>